<template>
  <div class="index">
    <div class="count">
      <div><span>未 归 还</span><img src="../assets/images/img.png"><br>
        <p>{{ unrestTotal }}</p></div>
      <div><span>逾 期 未 还</span><img src="../assets/images/img.png"><br>
        <p>{{returnedTotal}}</p></div>
      <div><span>损 坏 归 还</span><img src="../assets/images/img.png"><br>
        <p>{{damagedTotal}}</p></div>
      <div><span>已 归 还</span><img src="../assets/images/img.png"><br>
        <p>{{overdueTotal}}</p></div>
    </div>
    <div class="image">
<!--      <div ref="chart" style="height: 90%"></div>-->
      <div ref="chart2"></div>
    </div>

  </div>
</template>

<script>
import * as echarts from 'echarts';
import {listReturn} from "@/api/system/return";

export default {
  name: "Index",
  data() {
    return {
      // 版本号
      version: "3.8.8",
      unrestTotal:0,
      returnedTotal:0,
      damagedTotal:0,
      overdueTotal:0,



      //新增的数据属性
      // pieCharData:[
      //   {value:1048}
      // ]
    };
  },
  mounted() {
    // this.initChart();
    this.initChart2();
  },
  methods: {
    // initChart() {
    //   const chartDom = this.$refs.chart;
    //   const myChart = echarts.init(chartDom);
    //
    //   const option = {
    //     title: {
    //       //text: 'Referer of a Website',
    //       //subtext: 'Fake Data',
    //       left: 'center'
    //     },
    //     tooltip: {
    //       trigger: 'item'
    //     },
    //     legend: {
    //       orient: 'vertical',
    //       left: 'left'
    //     },
    //     series: [
    //       {
    //         name: 'Access From',
    //         type: 'pie',
    //         radius: '50%',
    //         data: [
    //           {value: 1048, name: '一'},
    //           {value: 735, name: '二'},
    //           {value: 580, name: '三'},
    //           {value: 484, name: '四'},
    //           {value: 300, name: '五'}
    //         ],
    //         emphasis: {
    //           itemStyle: {
    //             shadowBlur: 10,
    //             shadowOffsetX: 0,
    //             shadowColor: 'rgba(0, 0, 0, 0.5)'
    //           }
    //         }
    //       }
    //     ]
    //   };
    //
    //   myChart.setOption(option);
    // },
    /** 查询归还管理列表 */
    getList() {
      listReturn(this.queryParams).then(response => {
        // this.returnList = response.rows;
        console.log(response.rows)
        response.rows.forEach(item => {
          if(item.returnStatus === '3') {
            this.unrestTotal += 1;
          }else if(item.returnStatus === '1'){
            this.returnedTotal+=1;
          }else if(item.returnStatus === '2'){
            this.damagedTotal+=1;
          }else if(item.returnStatus === '0'){
            this.overdueTotal+=1;

          }
        })
      });
    },
    initChart2() {
            const chartDom = this.$refs.chart2;
            const myChart = echarts.init(chartDom);

            const option = {
                xAxis: {
                  type: 'category',
                    data: ['一月', '二月', '三月', '四月', '五月',
                      '六月', '七月','八月', '九月', '十月', '十一月', '十二月']
                },
              yAxis: {
                  type: 'value'
                },
              series: [
                  {
                      data: [600, 1000, 300, 1700, 2100, 2700, 4100,3400,2300,1700,1000,100],
                    type: 'bar'
                }
              ]
            };

            myChart.setOption(option);
          }
  },
  created() {
this.getList()
  }
};
</script>

<style scoped lang="scss">
.index {
  width: 100%;
  height: 849px;
  margin-top: 20px;
  margin-left: 20px;

  .count {
    width: 100%;
    height: 250px;
    //background: #1c84c6;
    padding: 25px;
    display: flex;
    justify-content: space-around;

    div {
      width: 300px;
      height: 200px;
      font-size: 25px;
      box-shadow: 0 0 10px rgb(218, 218, 218);
      border-radius: 10%;
      border: rgb(233, 233, 233) 1px solid;
      padding: 20px 40px;
      text-align: right;
      position: relative;

      span {
        color: rgb(127, 131, 137);
      }

      p {
        padding-right: 20px;
        font-size: 40px;
        font-weight: 900;
      }

      img {
        width: 110px;
        height: 110px;
        position: absolute;
        left: 20px;
        top: 60px;
      }
    }
  }

  .image {

    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;

    div{
      width: 100%;
      height: 75%;
    }
  }
}
</style>

